<template>
    <div class="r-container">
        <!-- 功能描述 -->
        <div class="hand">
            <div class="hand-title">
                <h2>
                    <icon name="role"></icon>
                    角色管理
                </h2>
            </div>
            <div class="breadcrumb">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{path: '/'}">我的控制台</el-breadcrumb-item>
                    <el-breadcrumb-item>管理员管理</el-breadcrumb-item>
                    <el-breadcrumb-item>角色管理</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <!-- 内容容器 -->
        <div class="container">
            <div class="block block-rounded">
                <div class="block-content">
                    <!-- 选项 -->
                    <div class="block-option">
                        <el-row>
                            <el-col :span="8">
                                <el-input v-model="params.keyword"
                                          size="medium"
                                          class="input-with-select"
                                          placeholder="角色名称"
                                          clearable
                                          :disabled="operate.searchLoading"
                                          @keyup.enter.native="handleSearch">
                                    <el-button slot="append"
                                               icon="el-icon-search"
                                               :loading="operate.searchLoading"
                                               @click="handleSearch">搜索
                                    </el-button>
                                </el-input>
                            </el-col>
                            <el-col :span="16" class="text-right">
                                <el-button-group>
                                    <el-button type="primary"
                                               size="medium"
                                               icon="el-icon-refresh"
                                               :loading="operate.loading"
                                               @click="handleReload">重新载入
                                    </el-button>
                                    <el-button type="primary"
                                               size="medium"
                                               icon="el-icon-plus"
                                               @click="openDialogBox">创建
                                    </el-button>
                                </el-button-group>
                            </el-col>
                        </el-row>
                    </div>
                    <!-- 列表 -->
                    <el-table ref="dataList"
                              v-loading="table.loading"
                              :element-loading-text="table.loadText"
                              element-loading-background="rgba(0, 0, 0, .3)"
                              highlight-current-row
                              row-key="id"
                              :stripe="true"
                              :data="roles"
                              :empty-text="table.emptyText">
                        <el-table-column label="" width="50" align="center">
                            <template slot-scope="item">
                                <icon :name="item.row.icon" class="font-s16"></icon>
                            </template>
                        </el-table-column>

                        <el-table-column label="角色">
                            <template slot-scope="item">
                                <span class="text-primary text-bold">{{ item.row.name }}</span>
                                <div class="text-info font-s12">{{ item.row.description }}</div>
                            </template>
                        </el-table-column>

                        <el-table-column label="更新" align="center" width="200">
                            <template slot-scope="item">
                                <span class="text-info">{{ item.row.updated_at }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="权限" width="100" align="center">
                            <template slot-scope="item">
                                <el-link type="primary"
                                         icon="rc-icon rc-icon-assignation mr-5"
                                         :underline="false">分配权限
                                </el-link>
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" width="100" align="center">
                            <template slot-scope="item">
                                <el-button-group class="r-button-group">
                                    <el-button type="warning"
                                               size="mini"
                                               icon="el-icon-edit"
                                               @click="editDialogBox(item)">
                                    </el-button>
                                    <el-popconfirm icon="el-icon-info"
                                                   icon-color="red"
                                                   title="确定删除该角色吗？"
                                                   confirm-button-text="确定"
                                                   cancel-button-text="取消"
                                                   @confirm="confirmDelete(item)">
                                        <el-button type="danger"
                                                   size="mini"
                                                   slot="reference"
                                                   icon="el-icon-delete"></el-button>
                                    </el-popconfirm>
                                </el-button-group>
                            </template>
                        </el-table-column>

                    </el-table>
                </div>
            </div>
        </div>
        <!-- from dialog -->
        <component :is="dialogBox.component" :dialog="dialogBox" @close="closeDialogBox"></component>
    </div>
</template>

<script lang="ts">
import Component, { mixins } from 'vue-class-component'
import { namespace } from 'vuex-class'

import BaseMixins from '@/mixins/base'
import DialogBoxMixins from '@/mixins/dialog'
import AuthMixins from '@/mixins/cms/auth'

import Create from '@/views/cms/admin/role/Create.vue'
import Edit from '@/views/cms/admin/role/Edit.vue'
import { errorMessage, loading, successMessage } from '@/utils'

const module = namespace('cms/role')

@Component({
  components: {
    Create,
    Edit
  }
})

export default class Index extends mixins(BaseMixins, DialogBoxMixins, AuthMixins) {
  // 操作组
  private operate: any = {
    loading: false,
    searchLoading: false
  }

  // Vuex
  @module.State private roles!: Array<any>
  @module.State private total!: number
  @module.Action private index!: (payload: any) => Promise<any>
  @module.Action private query!: (payload: any) => Promise<any>
  @module.Action private show!: (payload: any) => Promise<any>
  @module.Action private destroy!: (payload: any) => Promise<any>

  // 钩子
  created() {
    if (!this.roles.length) {
      this.getIndex()
    }
  }

  /**
   * 获取首页
   *
   * @private
   * @return {Promise<any>}
   */
  private getIndex(): Promise<any> {
    this.table.loading = true
    return this.index({}).then((res) => {
      this.table.loading = false

      if (res.data.total === 0) {
        this.table.emptyText = '暂无数据'
      }

      return res
    }).catch((err) => {
      this.table.loading = false
      return err
    })
  }

  /**
   * 获取查询
   *
   * @return Promise<any>
   */
  private getQuery(): Promise<any> {
    this.table.loading = true
    return this.query({param: this.params}).then((res) => {
      this.table.loading = false
      return res
    }).catch((err) => {
      this.table.loading = false
      return err
    })
  }

  /**
   * 处理搜索
   *
   * @return {void}
   */
  private handleSearch(): void {
    this.params = {
      keyword_type: this.params.keyword_type,
      keyword: this.params.keyword
    }
    this.search.loading = true
    this.getQuery().then((res) => {
      this.search.loading = false
    })
  }

  /**
   * 重新载入
   *
   * @private
   */
  private handleReload(): void {
    this.params = {}
    this.operate.loading = true
    this.getIndex().then((res) => {
      this.operate.loading = false
    }).catch((err) => {
      this.operate.loading = false
    })
  }

  /**
   * 编辑
   *
   * @param item
   * @private
   */
  private editDialogBox(item: any): void {
    const _loading = loading({background: 'transparent'})
    this.show({id: item.row.id}).then((res) => {
      if (res.status === 200) {
        this.dialogBox.component = 'Edit'
        this.$nextTick(() => {
          this.dialogBox.visible = true
          this.dialogBox.index = item.$index
        })
      }
      _loading.close()
    }).catch((err) => {
      _loading.close()
    })
  }

  /**
   * 删除
   *
   * @param item
   * @private
   */
  protected confirmDelete(item: any) {
    this.table.loading = true
    this.destroy({id: item.row.id, index: item.$index}).then((res) => {
      this.table.loading = false
      res.status === 200 ? successMessage(res.message) : errorMessage(res.message)
    }).catch((err) => {
      this.table.loading = false
    })
  }
}
</script>

<style lang="scss" scoped>

</style>
